<template>
	<view class="">
		<view class="ztimg_container" v-if="pos_inited.length > 0" :style="{
			'z-index': zindex,
			width:direction == 1 ? 10*1+line_num*line_height+'rpx':'',
			height:direction !=1 ? 10*1+line_num*line_height+'rpx;lineheight:'+line_height+'rpx;':'',
			top: pos_inited[1] + 'rpx',
			left: pos_inited[0] + 'rpx',
			transform: 'translate(' + cStv.offsetX + 'rpx, ' + cStv.offsetY + 'rpx) scale(' + cStv.scale + ') rotate(' + cStv.rotate + 'deg)'
		}" @tap="selected">
			<view @click.stop="updatetxt" class="tips" v-if="status === 1 && ismoving === 0"
				:style="{ transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0)', top: -34 - (1 / cStv.scale - 1) * 12 + 'rpx' }">
				点击编辑文字
			</view>

			<!--图片内容 -->
			<view class="zttxt_content" :style="{
				opacity: toumingdu / 100,
				'line-height': line_height + 'rpx',
				'letter-spacing': letterspacing + 'rpx',
				border: status === 1 && ismoving === 0 ? (2 / cStv.scale) + 'rpx solid rgba(153,153,153,0.8)':(checkbox === 1 ? (2 / cStv.scale) + 'rpx solid rgba(153,153,153,0.8)':''),
				top: '0rpx',
				left: '0rpx',
				color: color,
				'font-family': font,
				'text-align': duiqi,
				'font-weight': weight === 1 ? '800' : '',
				'writing-mode': direction === 1 ? 'vertical-lr' : ''
			}" id="myText" space="nbsp">
				<view class="">{{ txt }}</view>
				<view class="btn_zoom" v-if="status === 1 && ismoving === 0" :style="{
							bottom: '-20rpx',
							right: '-20rpx',
							position: 'absolute',
							transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0)'
						}" data-type="3"  @touchmove.stop="touchmove" @touchstart.stop="touchstart" @touchend.stop="touchend">
					<image class="btn_zoom-img" src="../../static/tubiao/5.png"></image>
				</view>
				<view class="btn_zoom" :style="{
						bottom: '-20rpx',
						left: '-20rpx',
						position: 'absolute',
						transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'
					}" v-if="status === 1 && ismoving === 0" @click="go_down">
					<img class="btn_zoom-img" src="../../static/tubiao/3.png">
				</view>
				<view class="btn_zoom" :style="{
						top: '-20rpx',
						right: '-20rpx',
						position: 'absolute',
						transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'
					}" v-if="status === 1 && ismoving === 0" @click="go_up">
					<img class="btn_zoom-img" src="../../static/tubiao/4.png">
				</view>
				<view class="btn_close" :style="{
						top: '-20rpx',
						left: '-20rpx',
						position: 'absolute',
						transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'
					}" @click="del" v-if="status === 1 && ismoving === 0">
					<img class="btn_zoom-img" src="../../static/tubiao/2.png">
				</view>
				<view class="" @touchmove.stop="touchmove"
					@touchstart.stop="touchstart" @touchend.stop="touchend" data-type="0" v-if="status === 1 && ismoving === 0" :style="{
						left: '50%',
						position: 'absolute',
						transform: 'translateX(-50%)',
						bottom: '-30rpx'
					}">
					<image :style="{
						transform: 'translate(0rpx, 0rpx) scale(' + (1 / cStv.scale) + ') rotate(0deg)'
					}" src="../../static/tubiao/1.png" class="btn_zoom-img"></image>
				</view>
			</view>
		</view>
		<text class="zttxt_content_quzhi" :style="{
				'letter-spacing': letterspacing + 'rpx',
				top: '0',
				left: '0',
				color: color,
				'font-family': font,
				'text-align': duiqi,
				'line-height': line_height + 'rpx',
				direction: direction === 1 ? 'writing-mode: vertical-lr;' : ''
			}" id="myText2" space="nbsp">{{ txt }}</text>
	</view>
</template>

<script>
	export default {
		name: 'zttxt',
		props: {
			checkbox: {
				type: Boolean,
				value: false
			},
			newScale: {
				type: Number,
				value: 1
			},
			dataid: {
				type: Number,
				value: ''
			},
			txt: {
				type: String,
				value: null
			},
			font: {
				type: String,
				value: ''
			},
			color: {
				type: String,
				value: ''
			},
			toumingdu: {
				type: Number,
				value: 1
			},
			//对齐方式
			duiqi: {
				type: String,
				value: 'left'
			},
			zindex: {
				type: Number,
				value: 0
			},
			yushe: {
				type: Number,
				value: 0
			},
			hasninitefont: {
				type: Number,
				value: 0
			},
			pPos: {
				type: Array,
				value: []
			},
			container: {
				type: Array,
				value: []
			},
			status: {
				type: Number,
				value: 0
			},
			ismoving: {
				type: Number,
				value: 0
			},
			lineheight: {
				type: Number,
				value: 40
			},
			letterspacing: {
				type: Number,
				value: 0
			},
			rpxTopx: {
				type: Number,
				value: 0
			},
			weight: {
				type: Number,
				value: 0
			},
			direction: {
				type: Number,
				value: -1
			},
			cStv: {
				type: Object,
				value: {
					offsetX: 0,
					offsetY: 0,
					scale: 1,
					rotate: 0,
				}
			},
		},
		watch: {
			txt: {
				handler(newval, oldval) {
					this.inite();
				},
				deep: true,
				immediate: true
			},
			hasninitefont: {
				handler(newval, oldval) {
					if ((this.yushe == 1) && (newval == 1)) {
						this.inite_yushe();
						this.yushe = 0;
					}
				},
				deep: true,
				immediate: true
			},
			lineheight: function(newval, oldval) {
				this.line_height = newval
			},
			direction: function(newval, oldval) {
				if (oldval != -1) {
					this.inite();
				}
			},
			cStv: {
				handler(newval, oldval) {
					if (newval = null) {
						this.cStv = this.cStv
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				line_height: 40, //
				line_num: 1,
				yuanhuan_pian: -6,
				pos_inited: [],
				originImg: null,
				//触屏相关
				type: 0,
				touch_start_pos: [0, 0],
				r: 0,
				center_pos: [0, 0], //初始化的
				cur_center_pos: [0, 0], //平移后的
				start_pos: [0, 0], //起始坐标
				has_inite: 0,
				is_move: 0,
				cur_chexiao: null,
				properties: ''
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 删除元素
			 */
			del: function() {
				this.$emit("del")
			},
			inite_yushe: function() {
				console.log('初始化预设文字');
				var txt_arr = this.txt.split('\n');
				var line_num = 0;
				for (var i = 0; i < txt_arr.length; ++i) {
					if ((txt_arr[i] == '') && (i == (txt_arr.length - 1))) {
						continue;
					}
					line_num++;
				}
				var width = 10 * 1 + line_num * this.line_height;
				this.line_num = line_num
				var that = this;
				var max_width = that.pPos[2];
				var max_heght = that.pPos[3];

				this.yushe = 0;
				var temp_container = this.container;
				//创建节点选择器
				var query = uni.createSelectorQuery();
				//选择id
				query.select('#myText2').boundingClientRect()
				query.exec(function(res) {
					//res就是 所有标签为myText的元素的信息 的数组
					that.has_inite = 1;
					//取高度
					if (that.direction == 0) {
						var txt_height = line_num * that.line_height;
					} else {
						var txt_height = res[0].height / that.rpxTopx;
					}
					var txt_width = res[0].width / that.rpxTopx;
					var center_pos = [];
					center_pos[0] = 375;
					center_pos[1] = 120 + max_heght / 2;
					that.pos_inited[0] = (max_width - txt_width) / 2;
					that.pos_inited[1] = (max_heght - txt_height) / 2;
					that.pos_inited[2] = txt_width;
					that.pos_inited[3] = txt_height;
					that.center_pos = center_pos;
					var a = {
						id: 1 + ':' + that.dataid,
						index: that.dataid
					}
					that.$emit("posInited", that.pos_inited,a);
					that.$emit("centerInited", center_pos,a);
					that.cStv.offsetX = that.cStv.offsetX + (that.pos_inited[2] -
						temp_container[2]) * that.cStv.scale / 2;
					that.cStv.offsetY = that.cStv.offsetY + (that.pos_inited[3] -
						temp_container[3]) * that.cStv.scale / 2;
					that.$emit("stvChanged", that.cStv, a);
				})
			},
			/**
			 * 初始化图片
			 */
			inite: function() {
				var txt_arr = this.txt.split('\n');
				var line_num = 0;
				for (var i = 0; i < txt_arr.length; ++i) {
					if ((txt_arr[i] == '') && (i == (txt_arr.length - 1))) {
						continue;
					}
					line_num++;
				}
				var width = 10 * 1 + line_num * this.line_height;
				this.line_num = line_num
				var that = this;
				var max_width = that.pPos[2];
				var max_heght = that.pPos[3];
				if (this.yushe == 1) //修改预设的文字
				{}
				if ((this.has_inite == 0) && (this.container[2] != 0)) //作品载入
				{
					that.has_inite = 1;
					var center_pos = [];
					center_pos[0] = 375;
					center_pos[1] = 120 + max_heght / 2;
					that.pos_inited[0] = (max_width - this.container[2]) / 2;
					that.pos_inited[1] = (max_heght - this.container[3]) / 2;
					that.pos_inited[2] = this.container[2];
					that.pos_inited[3] = this.container[3];
					that.center_pos = center_pos;
					var a = {
						id: 1 + ':' + that.dataid,
						index: that.dataid
					}
					that.$emit("centerInited", center_pos,a);
				} else {
					//创建节点选择器
					setTimeout(()=>{
					  const query = uni.createSelectorQuery().in(this);
					  query.select('#myText2').boundingClientRect((res)=>{
					    //res就是 所有标签为myText的元素的信息 的数组
					    if(!res){
					    	return
					    }
					    that.has_inite = 1;
					    //取高度
					    if (that.direction == 0) {
					    	var txt_height = line_num * that.line_height;
					    } else {
					    	var txt_height = res.height / that.rpxTopx;
					    }
					    var txt_width = res.width / that.rpxTopx;
					    var center_pos = [];
					    center_pos[0] = 375;
					    center_pos[1] = 120 + max_heght / 2;
					    that.pos_inited[0] = (max_width - txt_width) / 2;
					    that.pos_inited[1] = (max_heght - txt_height) / 2;
					    that.pos_inited[2] = txt_width;
					    that.pos_inited[3] = txt_height;
					    console.log(358, that.pos_inited)
					    that.center_pos = center_pos;
					    var a = {
					    	id: 1 + ':' + that.dataid,
					    	index: that.dataid
					    }
					    that.$emit("posInited", that.pos_inited, a);
					    that.$emit("centerInited", center_pos, a);
					    that.$forceUpdate();
					  }).exec();
					},100)
				}
			},
			touchstart: function(e) {
				var type = e.currentTarget.dataset.type;
				this.touch_start_pos[0] = e.touches[0].pageX;
				this.touch_start_pos[1] = e.touches[0].pageY;
				//撤销值
				var cstv = {
					offsetX: this.cStv.offsetX,
					offsetY: this.cStv.offsetY,
					rotate: this.cStv.rotate,
					scale: this.cStv.scale,
				}
				this.cur_chexiao = cstv;
				if (type == 0) //旋转
				{
					var center_pos = [];
					center_pos[0] = this.center_pos[0] + this.cStv.offsetX;
					center_pos[1] = this.center_pos[1] + this.cStv.offsetY;
					this.cur_center_pos = center_pos;
					//计算起始角度
					var rpx_to_px = this.rpxTopx;
					var diff_x = e.touches[0].pageX / rpx_to_px - center_pos[0];
					var diff_y = e.touches[0].pageY / rpx_to_px - center_pos[1];
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					var dis = Math.sqrt(x + y);
					if (diff_y >= 0) {
						this.start_angle = 360 * Math.asin(diff_x / dis) / (2 * Math.PI) + this.cStv.rotate;
					} else if (diff_x >= 0) {
						this.start_angle = 360 * Math.acos(diff_y / dis) / (2 * Math.PI) + this.cStv.rotate;
					} else {
						this.start_angle = 180 - 180 * Math.asin(diff_x / dis) / Math.PI + this.cStv.rotate;
					}
				} else if (type == 3) {
					var center_pos = [];
					center_pos[0] = this.center_pos[0] + this.cStv.offsetX;
					center_pos[1] = this.center_pos[1] + this.cStv.offsetY;
					this.cur_center_pos = center_pos;
					var rpx_to_px = this.rpxTopx;
					var diff_x = e.touches[0].clientX / rpx_to_px - center_pos[0];
					var diff_y = e.touches[0].clientY / rpx_to_px - center_pos[1];
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					this.start_distance = Math.sqrt(x + y);
					this.start_scale = this.cStv.scale;
				} else if (type == 2) {
					this.start_pos = [e.touches[0].pageX, e.touches[0].pageY];
					this.startwidth = this.pos_inited[2];
					this.startoffsetX = this.cStv.offsetX;
					this.startoffsetY = this.cStv.offsetY;
					this.startX = this.pos_inited[0];
					this.startY = this.pos_inited[1];
					this.angle_cos = Math.cos(this.cStv.rotate * Math.PI / 180);
					this.angle_sin = Math.sin(this.cStv.rotate * Math.PI / 180);
				}
			},
			/**
			 * 开始滑动
			 */
			touchmove: function(e) {
				var type = e.currentTarget.dataset.type;
				if (type == 0) {
					this.is_move = 1;
					var center_pos = this.cur_center_pos;
					var rpx_to_px = this.rpxTopx;
					var diff_x = e.touches[0].pageX / rpx_to_px - center_pos[0];
					var diff_y = e.touches[0].pageY / rpx_to_px - center_pos[1];
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					var dis = Math.sqrt(x + y);
					if (diff_y >= 0) {
						var angle = 180 * Math.asin(diff_x / dis) / Math.PI;
					} else if (diff_x >= 0) {
						var angle = 180 * Math.acos(diff_y / dis) / Math.PI;
					} else {
						var angle = 180 - 180 * Math.asin(diff_x / dis) / Math.PI;
					}
					var rotate = this.start_angle - angle;
					var xifu_jindu = 5;
					if ((rotate > (0 - xifu_jindu)) && (rotate < (0 + xifu_jindu))) {
						rotate = 0
					} else if (((rotate > (-90 - xifu_jindu))) && (rotate < (-90 + xifu_jindu))) {
						rotate = -90
					} else if (((rotate > (-180 - xifu_jindu))) && (rotate < (-180 + xifu_jindu))) {
						rotate = -180
					} else if (((rotate > (-270))) && (rotate < (-270 + xifu_jindu))) {
						rotate = -270
					} else if (((rotate > (90 - xifu_jindu))) && (rotate < (90))) {
						rotate = 90
					}
					this.cStv.rotate = rotate
					this.touch_start_pos[0] = e.touches[0].pageX;
					this.touch_start_pos[1] = e.touches[0].pageY;
				} else if (type == 3) {
					this.is_move = 1;
					var center_pos = this.cur_center_pos;
					var rpx_to_px = this.rpxTopx;
					var diff_x = e.touches[0].clientX / rpx_to_px - center_pos[0];
					var diff_y = e.touches[0].clientY / rpx_to_px - center_pos[1];
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					var cur_distance = Math.sqrt(x + y);
					this.cStv.scale = this.start_scale * (cur_distance) / this.start_distance;
				}
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit('stvChanged', this.cStv, a)
			},
			/**
			 * 触屏结束
			 */
			touchend: function(e) {
				var type = e.currentTarget.dataset.type;
				if ((type == 0) || (type == 3)) {
					var a = {
						id: 1 + ':' + this.dataid,
						index: this.dataid
					}
					this.$emit("stvChanged", this.cStv, a);
				}
				if (this.is_move == 1) {
					var cstv = {
						offsetX: this.cStv.offsetX,
						offsetY: this.cStv.offsetY,
						rotate: this.cStv.rotate,
						scale: this.cStv.scale,
					}
					var a = {
						id: 1 + ':' + this.dataid,
						index: this.dataid
					}
					this.$emit("addchexiao", [this.cur_chexiao, cstv], a);
					this.is_move = 0;
				}
			},
			updatetxt(){
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit("showedit",a)
			},
			/**
			 * 选中编辑
			 */
			selected: function() {
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit("focus",a)
				this.$emit("update",a)
			},
			go_down: function() {
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit("down",a)
			},
			go_up: function() {
				var a = {
					id: 1 + ':' + this.dataid,
					index: this.dataid
				}
				this.$emit("up",a)
			},
			change_pos: function() {

			},
		}
	}
</script>

<style lang="less" scoped>
	.ztimg_container {
		position: absolute;
		/* margin-left: -50%; */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.zttxt_content {
		position: relative;
		font-size: 40rpx;
		margin: 0;
		white-space: nowrap;
		width: auto;
		display: inline-block;
		// padding: 5rpx;
		// overflow: hidden;
		/* vertical-align: text-top; */
		/* vertical-align: baseline; */
		/* vertical-align: text-bottom; */
	}

	.zttxt_content_quzhi {
		overflow: hidden;
		position: relative;
		font-size: 40rpx;
		margin: 0;
		white-space: nowrap;
		padding: 5rpx;
		width: auto;
		display: inline-block;
		opacity: 0;
	}

	.ztimg_kuang {
		position: absolute;
	}

	.btn_xuanzhuan_view {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* background-color: yellow; */

	}

	.btn_xuanzhuan {
		width: 37.5rpx;
		height: 37.5rpx;
	}

	.ztimg_kuang_yuan {
		width: 12rpx;
		height: 12rpx;
		background: rgba(153, 153, 153, 1);
		border-radius: 50%;
		position: absolute;
	}

	.btn_suofang_heng {
		width: 14rpx;
		height: 6rpx;
		position: absolute;
	}

	.btn_suofang_shu {
		height: 100%;
		position: absolute;
		width: 40rpx;
		top: 0rpx;
		right: -20rpx;
		/* background-color: yellow;
  opacity: 0.3; */
	}

	.btn_suofang_shu image {
		position: absolute;
		height: 14rpx;
		margin-top: -7rpx;
		/* height: 50%; */
		/* margin-top: -25%; */
	}
	
	.btn_zoom-img{
		width: 30rpx;
		height: 30rpx;
	}

	.btn_zoom {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn_close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.tips {
		font-size: 20rpx;
		height: 34rpx;
		line-height: 34rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, .6);
		border-radius: 10rpx;
		text-align: center;
		border-radius: 10rpx;
		position: absolute;
		width: fit-content;
		width: 186rpx;
	}
</style>